{% extends "pos/base.html" %}

{% block title %}
    Our Customers Management
{% endblock %}


{% block heading %}
    Our Customers
{% endblock %}


{% block stylesheets %}

<style>
    :root {
        --customer-primary: #116dc1;
        --customer-primary-dark: #07569d;
        --customer-primary-soft: #edf7ff;
        --customer-text: #14263d;
        --customer-muted: #718096;
        --customer-border: #dfe8f1;
        --customer-bg: #f5f8fc;
    }

    .customer-manage-page {
        margin-top: -0.25rem;
        padding-bottom: 1.5rem;
    }

    /*
     * pos/base.html mein global form styling hai.
     * Is page ke forms ko us styling se reset karna zaroori hai.
     */
    .customer-manage-page form.customer-filter-form,
    .customer-manage-page form.customer-inline-form,
    .customer-manage-page form.customer-hidden-form {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    /* ======================================================
       PAGE TOP
    ====================================================== */

    .customer-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.85rem;
    }

    .customer-subtitle {
        margin: 0;
        color: var(--customer-muted);
        font-size: 0.82rem;
    }

    .public-page-btn {
        border-radius: 0.45rem;
        font-size: 0.78rem;
        font-weight: 600;
    }

    /* ======================================================
       SUMMARY CARDS
    ====================================================== */

    .customer-summary-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-bottom: 0.85rem;
    }

    .customer-summary-card {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0.9rem;
        border: 1px solid var(--customer-border);
        border-radius: 0.65rem;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 48, 87, 0.045);
    }

    .summary-icon {
        width: 2.35rem;
        height: 2.35rem;
        flex: 0 0 2.35rem;
        display: grid;
        place-items: center;
        border-radius: 0.6rem;
        color: var(--customer-primary);
        background: var(--customer-primary-soft);
        font-size: 0.9rem;
    }

    .summary-card-visible .summary-icon {
        color: #168348;
        background: #eaf8f0;
    }

    .summary-card-hidden .summary-icon {
        color: #687386;
        background: #f0f2f5;
    }

    .summary-number {
        color: var(--customer-text);
        font-size: 1.18rem;
        line-height: 1.05;
        font-weight: 700;
    }

    .summary-label {
        margin-top: 0.18rem;
        color: var(--customer-muted);
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04rem;
    }

    /* ======================================================
       FILTER PANEL
    ====================================================== */

    .customer-panel {
        overflow: visible;
        border: 1px solid var(--customer-border);
        border-radius: 0.7rem;
        background: #fff;
        box-shadow: 0 5px 18px rgba(15, 48, 87, 0.05);
    }

    .customer-filter-panel {
        position: relative;
        z-index: 20;
        margin-bottom: 0.85rem;
        padding: 0.85rem;
    }

    .customer-filter-panel label {
        display: block;
        margin-bottom: 0.3rem;
        color: #405970;
        font-size: 0.69rem;
        font-weight: 700;
    }

    .customer-filter-panel .form-control {
        height: 2.2rem;
        border-color: #d8e3ed;
        border-radius: 0.4rem;
        font-size: 0.76rem;
    }

    .customer-filter-panel .form-control:focus {
        border-color: var(--customer-primary);
        box-shadow: 0 0 0 0.16rem rgba(17, 109, 193, 0.1);
    }

    .filter-actions {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .filter-actions .btn {
        min-height: 2.2rem;
        border-radius: 0.4rem;
        font-size: 0.74rem;
        font-weight: 600;
    }

    /* Select2 */
    .customer-filter-panel .select2-container {
        width: 100% !important;
    }

    .customer-filter-panel
    .select2-container--bootstrap4
    .select2-selection--single {
        height: 2.2rem !important;
        border-color: #d8e3ed;
        border-radius: 0.4rem;
        font-size: 0.76rem;
    }

    .customer-filter-panel
    .select2-container--bootstrap4
    .select2-selection--single
    .select2-selection__rendered {
        height: 2.15rem;
        line-height: 2.15rem;
        padding-left: 0.7rem;
        padding-right: 2rem;
    }

    .customer-filter-panel
    .select2-container--bootstrap4
    .select2-selection--single
    .select2-selection__arrow {
        height: 2.1rem;
    }

    .select2-container--open {
        z-index: 1080;
    }

    .select2-results__option {
        font-size: 0.76rem;
    }

    /* ======================================================
       BULK TOOLBAR
    ====================================================== */

    .customer-list-panel {
        overflow: hidden;
    }

    .bulk-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.65rem 0.8rem;
        border-bottom: 1px solid var(--customer-border);
        background: #fbfdff;
    }

    .bulk-left,
    .bulk-right {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .bulk-toolbar .btn {
        border-radius: 0.38rem;
        font-size: 0.69rem;
        font-weight: 600;
    }

    .selected-count {
        min-width: 5.6rem;
        color: var(--customer-muted);
        font-size: 0.71rem;
    }

    .result-count {
        color: var(--customer-muted);
        font-size: 0.72rem;
    }

    .result-count strong {
        color: var(--customer-text);
    }

    /* ======================================================
       TABLE
    ====================================================== */

    .customer-table {
        width: 100%;
        margin: 0;
        table-layout: auto;
    }

    .customer-table th,
    .customer-table td {
        padding: 0.58rem 0.6rem !important;
        border-color: #edf1f5 !important;
        vertical-align: middle !important;
    }

    .customer-table thead th {
        border-top: 0;
        border-bottom: 1px solid #dfe7ef !important;
        color: #52697f !important;
        background: #f8fafc !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.025rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .customer-table tbody tr td {
        border-bottom: 1px solid #edf1f5 !important;
        color: #253a50 !important;
        font-size: 0.75rem !important;
    }

    .customer-table tbody tr:hover {
        background: #f9fcff;
    }

    .select-column {
        width: 2.4rem;
        text-align: center;
    }

    .business-cell {
        min-width: 15rem;
    }

    .business-identity {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .business-avatar {
        width: 2.25rem;
        height: 2.25rem;
        flex: 0 0 2.25rem;
        display: grid;
        place-items: center;
        border-radius: 0.55rem;
        color: #fff;
        background: linear-gradient(
            135deg,
            #1780db,
            #0757a7
        );
        font-size: 0.78rem;
        font-weight: 700;
    }

    .business-info {
        min-width: 0;
    }

    .business-name {
        overflow-wrap: anywhere;
        color: var(--customer-text);
        font-size: 0.78rem;
        line-height: 1.3;
        font-weight: 700;
    }

    .business-subtitle {
        margin-top: 0.12rem;
        overflow-wrap: anywhere;
        color: var(--customer-muted);
        font-size: 0.67rem;
        line-height: 1.35;
    }

    .business-type-badge {
        display: inline-block;
        max-width: 9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0.25rem 0.45rem;
        border: 1px solid #d6eafa;
        border-radius: 0.35rem;
        color: #1764a5;
        background: #eef7ff;
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .contact-line {
        display: block;
        max-width: 15rem;
        overflow-wrap: anywhere;
        color: #425b72;
        font-size: 0.7rem;
        line-height: 1.45;
    }

    .contact-line-muted {
        color: #8391a1;
    }

    .parent-badge {
        display: inline-block;
        max-width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0.27rem 0.48rem;
        border-radius: 0.38rem;
        color: #6751a5;
        background: #f3f0ff;
        font-size: 0.66rem;
        font-weight: 600;
    }

    .main-customer-label {
        color: #7b8997;
        font-size: 0.68rem;
    }

    .visibility-badge {
        min-width: 4.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.28rem;
        padding: 0.3rem 0.48rem;
        border-radius: 999px;
        font-size: 0.64rem;
        font-weight: 700;
    }

    .visibility-visible {
        color: #167643;
        background: #e9f8ef;
    }

    .visibility-hidden {
        color: #687386;
        background: #eff2f5;
    }

    .actions-cell {
        min-width: 9.5rem;
        white-space: nowrap;
        text-align: right;
    }

    .actions-cell .btn {
        border-radius: 0.35rem;
        font-size: 0.66rem;
        font-weight: 600;
    }

    .row-select,
    #select-all {
        width: 0.95rem;
        height: 0.95rem;
        cursor: pointer;
    }

    /* ======================================================
       FOOTER AND PAGINATION
    ====================================================== */

    .customer-list-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.65rem 0.8rem;
        background: #fff;
    }

    .page-summary {
        color: var(--customer-muted);
        font-size: 0.7rem;
    }

    .pagination {
        margin: 0;
    }

    .pagination .page-link {
        min-width: 1.9rem;
        padding: 0.3rem 0.5rem;
        border-color: #dce5ee;
        color: #4d667e;
        font-size: 0.68rem;
        text-align: center;
    }

    .pagination .page-item.active .page-link {
        border-color: var(--customer-primary);
        background: var(--customer-primary);
    }

    /* ======================================================
       MOBILE
    ====================================================== */

    @media (max-width: 991.98px) {
        .customer-summary-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .filter-actions {
            margin-top: 0.35rem;
        }
    }

    @media (max-width: 767.98px) {
        .customer-topbar {
            align-items: flex-start;
        }

        .customer-summary-grid {
            grid-template-columns: 1fr;
            gap: 0.45rem;
        }

        .customer-summary-card {
            padding: 0.6rem 0.75rem;
        }

        .bulk-toolbar {
            align-items: flex-start;
            flex-direction: column;
        }

        .bulk-left,
        .bulk-right {
            width: 100%;
        }

        .customer-list-panel {
            overflow: visible;
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        .customer-list-panel .table-responsive {
            overflow: visible;
        }

        .customer-table,
        .customer-table tbody,
        .customer-table tr,
        .customer-table td {
            display: block;
            width: 100%;
        }

        .customer-table thead {
            display: none;
        }

        .customer-table tbody tr {
            position: relative;
            margin-bottom: 0.65rem;
            overflow: hidden;
            border: 1px solid var(--customer-border);
            border-radius: 0.65rem;
            background: #fff;
            box-shadow: 0 4px 14px rgba(15, 48, 87, 0.045);
        }

        .customer-table tbody tr td {
            min-height: 2.25rem;
            display: grid;
            grid-template-columns: 7rem minmax(0, 1fr);
            align-items: center;
            gap: 0.55rem;
            padding: 0.48rem 0.7rem !important;
            border-bottom: 1px solid #edf1f5 !important;
            text-align: left !important;
        }

        .customer-table tbody tr td::before {
            content: attr(data-label);
            color: #74869a;
            font-size: 0.63rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .customer-table tbody tr td.select-column {
            display: block;
            min-height: 0;
            padding: 0.55rem 0.7rem !important;
            background: #f8fbfe;
        }

        .customer-table tbody tr td.select-column::before {
            display: none;
        }

        .customer-table tbody tr td.business-cell {
            display: block;
            min-width: 0;
        }

        .customer-table tbody tr td.business-cell::before {
            display: none;
        }

        .contact-line {
            max-width: none;
        }

        .actions-cell {
            min-width: 0;
            white-space: normal;
        }

        .customer-list-footer {
            align-items: flex-start;
            flex-direction: column;
            border: 1px solid var(--customer-border);
            border-radius: 0.65rem;
        }
    }

    @media (max-width: 480px) {
        .customer-topbar {
            display: block;
        }

        .public-page-btn {
            margin-top: 0.55rem;
            width: 100%;
        }

        .filter-actions {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .filter-actions .btn {
            width: 100%;
        }

        .bulk-left .btn,
        .bulk-right .btn {
            flex: 1;
        }

        .customer-table tbody tr td {
            grid-template-columns: 5.8rem minmax(0, 1fr);
        }

        .actions-cell .btn,
        .actions-cell form {
            margin-bottom: 0.25rem;
        }
    }
</style>

{% endblock %}


{% block content %}

<div class="customer-manage-page">

    <!-- ==================================================
         TOP BAR
    =================================================== -->

    <div class="customer-topbar">

        <p class="customer-subtitle">
            Search businesses, manage customer relationships and
            control public website visibility.
        </p>

        <a
            href="{% url 'ref:customers_public' %}"
            target="_blank"
            rel="noopener"
            class="btn btn-sm btn-outline-primary public-page-btn"
        >
            <i class="fas fa-external-link-alt mr-1"></i>
            Open Public Page
        </a>

    </div>


    <!-- ==================================================
         SUMMARY
    =================================================== -->

    <div class="customer-summary-grid">

        <div class="customer-summary-card">
            <div class="summary-icon">
                <i class="fas fa-building"></i>
            </div>

            <div>
                <div class="summary-number">
                    {{ total_all }}
                </div>

                <div class="summary-label">
                    Total Customers
                </div>
            </div>
        </div>


        <div class="customer-summary-card summary-card-visible">
            <div class="summary-icon">
                <i class="fas fa-eye"></i>
            </div>

            <div>
                <div class="summary-number">
                    {{ visible_count }}
                </div>

                <div class="summary-label">
                    Visible on Site
                </div>
            </div>
        </div>


        <div class="customer-summary-card summary-card-hidden">
            <div class="summary-icon">
                <i class="fas fa-eye-slash"></i>
            </div>

            <div>
                <div class="summary-number">
                    {{ hidden_count }}
                </div>

                <div class="summary-label">
                    Hidden from Site
                </div>
            </div>
        </div>

    </div>


    <!-- ==================================================
         FILTERS
    =================================================== -->

    <div class="customer-panel customer-filter-panel">

        <form
            method="get"
            action="{% url 'ref:customer_manage' %}"
            id="customer-filter-form"
            class="customer-filter-form"
        >

            <div class="row align-items-end">

                <div class="col-lg-5 col-md-12 mb-2 mb-lg-0">

                    <label for="business-search">
                        Search Business
                    </label>

                    <select
                        id="business-search"
                        name="customer"
                        class="form-control"
                    >
                        {% if selected_customer %}
                            <option
                                value="{{ selected_customer.pk }}"
                                selected
                            >
                                {{ selected_customer_text }}
                            </option>
                        {% endif %}
                    </select>

                </div>


                <div class="col-lg-3 col-md-5 mb-2 mb-lg-0">

                    <label for="business-type-filter">
                        Business Type
                    </label>

                    <select
                        id="business-type-filter"
                        name="business_type"
                        class="form-control"
                    >
                        <option value="">
                            All Business Types
                        </option>

                        {% for business_type in business_types %}
                            <option
                                value="{{ business_type }}"
                                {% if selected_type == business_type %}
                                    selected
                                {% endif %}
                            >
                                {{ business_type }}
                            </option>
                        {% endfor %}
                    </select>

                </div>


                <div class="col-lg-2 col-md-4 mb-2 mb-lg-0">

                    <label for="visibility-filter">
                        Website Status
                    </label>

                    <select
                        id="visibility-filter"
                        name="visibility"
                        class="form-control"
                    >
                        <option
                            value="all"
                            {% if selected_visibility == "all" %}
                                selected
                            {% endif %}
                        >
                            All
                        </option>

                        <option
                            value="visible"
                            {% if selected_visibility == "visible" %}
                                selected
                            {% endif %}
                        >
                            Visible
                        </option>

                        <option
                            value="hidden"
                            {% if selected_visibility == "hidden" %}
                                selected
                            {% endif %}
                        >
                            Hidden
                        </option>
                    </select>

                </div>


                <div class="col-lg-2 col-md-3">

                    <div class="filter-actions">

                        <button
                            type="submit"
                            class="btn btn-primary flex-fill"
                        >
                            <i class="fas fa-filter mr-1"></i>
                            Filter
                        </button>

                        <a
                            href="{% url 'ref:customer_manage' %}"
                            class="btn btn-light"
                            title="Reset filters"
                        >
                            <i class="fas fa-undo"></i>
                        </a>

                    </div>

                </div>

            </div>

        </form>

    </div>


    <!-- Hidden bulk action form -->
    <form
        method="post"
        action="{% url 'ref:customer_bulk_visibility' %}"
        id="customer-bulk-form"
        class="customer-hidden-form"
    >
        {% csrf_token %}

        <input
            type="hidden"
            name="action"
            id="bulk-action"
            value=""
        >

        <input
            type="hidden"
            name="next"
            value="{{ request.get_full_path }}"
        >
    </form>


    <!-- ==================================================
         CUSTOMER LIST
    =================================================== -->

    <div class="customer-panel customer-list-panel">

        <div class="bulk-toolbar">

            <div class="bulk-left">

                <button
                    type="button"
                    id="mark-all"
                    class="btn btn-sm btn-outline-primary"
                >
                    <i class="fas fa-check-square mr-1"></i>
                    Mark All
                </button>

                <button
                    type="button"
                    id="unmark-all"
                    class="btn btn-sm btn-outline-secondary"
                >
                    <i class="far fa-square mr-1"></i>
                    Unmark All
                </button>

                <span
                    id="selected-count"
                    class="selected-count"
                >
                    0 selected
                </span>

            </div>


            <div class="bulk-right">

                <button
                    type="button"
                    class="btn btn-sm btn-success js-bulk-action"
                    data-action="show"
                >
                    <i class="fas fa-eye mr-1"></i>
                    Show Selected
                </button>

                <button
                    type="button"
                    class="btn btn-sm btn-secondary js-bulk-action"
                    data-action="hide"
                >
                    <i class="fas fa-eye-slash mr-1"></i>
                    Hide Selected
                </button>

                <span class="result-count">
                    <strong>{{ filtered_count }}</strong>
                    result{{ filtered_count|pluralize }}
                </span>

            </div>

        </div>


        <div class="table-responsive">

            <table class="table customer-table">

                <thead>
                    <tr>
                        <th class="select-column">
                            <input
                                type="checkbox"
                                id="select-all"
                                title="Select all visible records"
                            >
                        </th>

                        <th>Customer / Business</th>
                        <th>Business Type</th>
                        <th>Contact</th>
                        <th>Parent Customer</th>
                        <th>Order</th>
                        <th>Website Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>

                <tbody>

                    {% for customer in customers %}

                        {% with profile=customer.business_profile %}

                            <tr>

                                <td
                                    class="select-column"
                                    data-label="Select"
                                >
                                    <input
                                        type="checkbox"
                                        name="selected_ids"
                                        value="{{ customer.pk }}"
                                        class="row-select"
                                        form="customer-bulk-form"
                                    >
                                </td>


                                <td
                                    class="business-cell"
                                    data-label="Business"
                                >

                                    <div class="business-identity">

                                        <div class="business-avatar">
                                            {{ profile.display_initial }}
                                        </div>

                                        <div class="business-info">

                                            <div class="business-name">
                                                {{ profile.display_title }}
                                            </div>

                                            {% if profile.company_name and profile.company_name != profile.display_title %}
                                                <div class="business-subtitle">
                                                    {{ profile.company_name }}
                                                </div>
                                            {% endif %}

                                            {% if profile.address %}
                                                <div class="business-subtitle">
                                                    <i class="fas fa-map-marker-alt mr-1"></i>
                                                    {{ profile.address }}
                                                </div>
                                            {% endif %}

                                        </div>

                                    </div>

                                </td>


                                <td data-label="Business Type">

                                    {% if profile.business_type %}

                                        <span
                                            class="business-type-badge"
                                            title="{{ profile.business_type }}"
                                        >
                                            {{ profile.business_type }}
                                        </span>

                                    {% else %}

                                        <span class="contact-line-muted">
                                            Not set
                                        </span>

                                    {% endif %}

                                </td>


                                <td data-label="Contact">

                                    {% if profile.public_phone %}
                                        <span class="contact-line">
                                            <i class="fas fa-phone-alt mr-1"></i>
                                            {{ profile.public_phone }}
                                        </span>
                                    {% endif %}

                                    {% if profile.public_email %}
                                        <span class="contact-line">
                                            <i class="fas fa-envelope mr-1"></i>
                                            {{ profile.public_email }}
                                        </span>
                                    {% endif %}

                                    {% if not profile.public_phone and not profile.public_email %}
                                        <span class="contact-line-muted">
                                            No public contact
                                        </span>
                                    {% endif %}

                                </td>


                                <td data-label="Parent Customer">

                                    {% if customer.parent %}

                                        <span
                                            class="parent-badge"
                                            title="{{ customer.parent }}"
                                        >
                                            {{ customer.parent }}
                                        </span>

                                    {% else %}

                                        <span class="main-customer-label">
                                            <i class="fas fa-star mr-1"></i>
                                            Main customer
                                        </span>

                                    {% endif %}

                                </td>


                                <td data-label="Order">
                                    {{ customer.display_order }}
                                </td>


                                <td data-label="Website Status">

                                    {% if profile.show_on_site %}

                                        <span
                                            class="visibility-badge
                                                   visibility-visible"
                                        >
                                            <i class="fas fa-circle"></i>
                                            Visible
                                        </span>

                                    {% else %}

                                        <span
                                            class="visibility-badge
                                                   visibility-hidden"
                                        >
                                            <i class="fas fa-circle"></i>
                                            Hidden
                                        </span>

                                    {% endif %}

                                </td>


                                <td
                                    class="actions-cell"
                                    data-label="Actions"
                                >

                                    <a
                                        href="{% url 'ref:customer_edit' customer.pk %}"
                                        class="btn btn-sm btn-outline-primary"
                                    >
                                        <i class="fas fa-edit mr-1"></i>
                                        Edit
                                    </a>


                                    <form
                                        method="post"
                                        action="{% url 'ref:customer_toggle_visibility' customer.pk %}"
                                        class="d-inline customer-inline-form
                                               js-toggle-visibility-form"
                                        data-business="{{ profile.display_title }}"
                                        data-action="{% if profile.show_on_site %}hide{% else %}show{% endif %}"
                                    >
                                        {% csrf_token %}

                                        <input
                                            type="hidden"
                                            name="next"
                                            value="{{ request.get_full_path }}"
                                        >

                                        {% if profile.show_on_site %}

                                            <button
                                                type="submit"
                                                class="btn btn-sm
                                                       btn-outline-secondary"
                                            >
                                                <i class="fas fa-eye-slash mr-1"></i>
                                                Hide
                                            </button>

                                        {% else %}

                                            <button
                                                type="submit"
                                                class="btn btn-sm
                                                       btn-outline-success"
                                            >
                                                <i class="fas fa-eye mr-1"></i>
                                                Show
                                            </button>

                                        {% endif %}

                                    </form>

                                </td>

                            </tr>

                        {% endwith %}

                    {% empty %}

                        <tr>
                            <td
                                colspan="8"
                                class="text-center py-5 text-muted"
                            >
                                <i class="fas fa-search fa-2x mb-3"></i>

                                <div>
                                    No customers found for the selected filters.
                                </div>
                            </td>
                        </tr>

                    {% endfor %}

                </tbody>

            </table>

        </div>


        <div class="customer-list-footer">

            <div class="page-summary">
                Showing page
                <strong>{{ page_obj.number }}</strong>
                of
                <strong>{{ page_obj.paginator.num_pages }}</strong>
            </div>


            {% if page_obj.paginator.num_pages > 1 %}

                <nav aria-label="Customer pagination">

                    <ul class="pagination pagination-sm">

                        {% if page_obj.has_previous %}

                            <li class="page-item">
                                <a
                                    class="page-link"
                                    href="?page={{ page_obj.previous_page_number }}{% if selected_customer_id %}&customer={{ selected_customer_id }}{% endif %}{% if selected_type %}&business_type={{ selected_type|urlencode }}{% endif %}&visibility={{ selected_visibility }}"
                                >
                                    Previous
                                </a>
                            </li>

                        {% endif %}


                        {% for page_number in page_obj.paginator.page_range %}

                            {% if page_number >= page_obj.number|add:"-2" and page_number <= page_obj.number|add:"2" %}

                                <li
                                    class="page-item
                                    {% if page_obj.number == page_number %}
                                        active
                                    {% endif %}"
                                >
                                    <a
                                        class="page-link"
                                        href="?page={{ page_number }}{% if selected_customer_id %}&customer={{ selected_customer_id }}{% endif %}{% if selected_type %}&business_type={{ selected_type|urlencode }}{% endif %}&visibility={{ selected_visibility }}"
                                    >
                                        {{ page_number }}
                                    </a>
                                </li>

                            {% endif %}

                        {% endfor %}


                        {% if page_obj.has_next %}

                            <li class="page-item">
                                <a
                                    class="page-link"
                                    href="?page={{ page_obj.next_page_number }}{% if selected_customer_id %}&customer={{ selected_customer_id }}{% endif %}{% if selected_type %}&business_type={{ selected_type|urlencode }}{% endif %}&visibility={{ selected_visibility }}"
                                >
                                    Next
                                </a>
                            </li>

                        {% endif %}

                    </ul>

                </nav>

            {% endif %}

        </div>

    </div>

</div>

{% endblock %}


{% block javascripts %}

<script>
    $(function () {
        "use strict";

        const $filterForm = $("#customer-filter-form");
        const $businessSearch = $("#business-search");

        const $selectAll = $("#select-all");
        const $rowCheckboxes = $(".row-select");
        const $selectedCount = $("#selected-count");

        const $bulkForm = $("#customer-bulk-form");
        const $bulkAction = $("#bulk-action");


        // ====================================================
        // SELECT2 AJAX BUSINESS SEARCH
        // ====================================================

        $businessSearch.select2({
            theme: "bootstrap4",
            width: "100%",
            allowClear: true,
            placeholder: "Search name, phone, email or address...",

            minimumInputLength: 0,

            ajax: {
                url: "{% url 'ref:customer_search_api' %}",
                dataType: "json",
                delay: 300,
                cache: true,

                data: function (params) {
                    return {
                        term: params.term || "",
                        page: params.page || 1
                    };
                },

                processResults: function (data) {
                    return {
                        results: data.results || [],
                        pagination: data.pagination || {
                            more: false
                        }
                    };
                }
            },

            escapeMarkup: function (markup) {
                return markup;
            }
        });


        // Submit filters when exact business changes
        $businessSearch.on(
            "select2:select select2:clear",
            function () {
                $filterForm.trigger("submit");
            }
        );


        // Automatically submit simple dropdown filters
        $("#business-type-filter, #visibility-filter").on(
            "change",
            function () {
                $filterForm.trigger("submit");
            }
        );


        // ====================================================
        // CHECKBOX SELECTION
        // ====================================================

        function updateSelectedCount() {
            const totalRows = $rowCheckboxes.length;
            const selectedRows = $rowCheckboxes.filter(":checked").length;

            $selectedCount.text(
                selectedRows + " selected"
            );

            if (totalRows === 0) {
                $selectAll.prop({
                    checked: false,
                    indeterminate: false
                });

                return;
            }

            if (selectedRows === 0) {
                $selectAll.prop({
                    checked: false,
                    indeterminate: false
                });

            } else if (selectedRows === totalRows) {
                $selectAll.prop({
                    checked: true,
                    indeterminate: false
                });

            } else {
                $selectAll.prop({
                    checked: false,
                    indeterminate: true
                });
            }
        }


        function setAllRows(isChecked) {
            $rowCheckboxes.prop(
                "checked",
                isChecked
            );

            updateSelectedCount();
        }


        $selectAll.on("change", function () {
            setAllRows(
                $(this).is(":checked")
            );
        });


        $rowCheckboxes.on("change", function () {
            updateSelectedCount();
        });


        $("#mark-all").on("click", function () {
            setAllRows(true);
        });


        $("#unmark-all").on("click", function () {
            setAllRows(false);
        });


        updateSelectedCount();


        // ====================================================
        // BULK SHOW / HIDE
        // ====================================================

        $(".js-bulk-action").on("click", function () {
            const action = String(
                $(this).data("action") || ""
            ).toLowerCase();

            const selectedRows = $rowCheckboxes.filter(
                ":checked"
            ).length;

            if (!selectedRows) {
                Swal.fire({
                    icon: "warning",
                    title: "No customer selected",
                    text: "Please mark at least one customer first.",
                    confirmButtonColor: "#116dc1"
                });

                return;
            }

            const actionText = (
                action === "show"
                ? "show on the public website"
                : "hide from the public website"
            );

            Swal.fire({
                icon: "question",
                title: "Confirm bulk action",
                text:
                    "Do you want to " +
                    actionText +
                    " for " +
                    selectedRows +
                    " selected customer(s)?",

                showCancelButton: true,
                confirmButtonColor: (
                    action === "show"
                    ? "#198754"
                    : "#6c757d"
                ),
                cancelButtonColor: "#adb5bd",
                confirmButtonText: (
                    action === "show"
                    ? "Yes, show"
                    : "Yes, hide"
                )
            }).then(function (result) {
                if (!result.isConfirmed) {
                    return;
                }

                $bulkAction.val(action);
                $bulkForm.trigger("submit");
            });
        });


        // ====================================================
        // INDIVIDUAL SHOW / HIDE CONFIRMATION
        // ====================================================

        $(".js-toggle-visibility-form").on(
            "submit",
            function (event) {
                event.preventDefault();

                const form = this;

                const businessName = String(
                    $(form).data("business") || "this customer"
                );

                const action = String(
                    $(form).data("action") || ""
                ).toLowerCase();

                const actionText = (
                    action === "show"
                    ? "show"
                    : "hide"
                );

                Swal.fire({
                    icon: "question",
                    title: (
                        action === "show"
                        ? "Show customer?"
                        : "Hide customer?"
                    ),

                    text:
                        "Do you want to " +
                        actionText +
                        ' "' +
                        businessName +
                        '" on the public website?',

                    showCancelButton: true,
                    confirmButtonColor: (
                        action === "show"
                        ? "#198754"
                        : "#6c757d"
                    ),
                    cancelButtonColor: "#adb5bd",

                    confirmButtonText: (
                        action === "show"
                        ? "Yes, show"
                        : "Yes, hide"
                    )

                }).then(function (result) {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            }
        );
    });
</script>

{% endblock %}